<template>
  <div>
    <!-- 选择地址 -->
    <a-modal v-model="visible" :title="title" :centered="true" width="1000px" @ok="handleAddress" @cancel="closeAddress" destroyOnClose>
      <a-button type="primary" icon="plus" @click="addAddress">新增</a-button>
      <a-radio-group v-model="addsValue" @change="addsChange" style="width: 100%">
        <a-list item-layout="horizontal" :data-source="addressList">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-row align="middle" justify="center" style="width: 100%">
              <a-col :span="3">
                <a-radio :value="item.id">{{ item.contactName }}</a-radio>
              </a-col>
              <!-- <a-col :span="3">{{ item.contactName }}</a-col> -->
              <a-col :span="2">{{ item.province }}</a-col>
              <a-col :span="2">{{ item.city }}</a-col>
              <a-col :span="2">{{ item.district }}</a-col>
              <a-col :span="9">{{ item.address }}</a-col>
              <a-col :span="3">{{ item.contactPhone }}</a-col>
              <a-col :span="1">
                <a-icon type="edit" style="color: #1890ff; cursor: pointer; font-size: 18px" @click="editAddress(item)" />
              </a-col>
              <a-col :span="2"><span v-if="item.logDefault == 1">默认地址</span></a-col>
            </a-row>
          </a-list-item>
        </a-list>
      </a-radio-group>
    </a-modal>
    <!-- 编辑地址 -->
    <AddressEdit ref="editModal" :unionId="unionId" @refreshList="refreshList" :titleSize="titleSize"></AddressEdit>
  </div>
</template>
<script>
import { selectLogistics } from '@/api/box/workbench'
import AddressEdit from './AddressEdit'
export default {
  props: {
    userInfo: {
      type: Object,
      default: null
    },
    unionId: {
      type: String,
      default: ''
    },
    defLogistic: {
      type: Object,
      default: null
    },
    title: {
      type: String,
      require: false,
      default: '收货地址列表'
    }
  },
  components: {
    AddressEdit
  },
  data() {
    return {
      titleSize: '',
      visible: false,
      addressList: [],
      addsValue: '',
      currAddsId: '',
      visibleEdit: false,
      editAdds: {},
      pcaOptions: [],
      pcaDefault: []
    }
  },
  methods: {
    show() {
      this.$nextTick(() => {
        this.visible = true
        this.fetchAddressList()
      })
    },
    // 查看顾客地址列表
    fetchAddressList() {
      selectLogistics(this.unionId)
        .then(res => {
          if (res.code === 0) {
            this.addressList = res.data
            this.addsValue = this.defLogistic.id
            this.currAddsId = this.defLogistic.id
          } else {
            this.$message.error(res.data)
          }
        })
        .catch(err => {
          console.log('查看顾客地址列表:' + err)
        })
    },
    // 选择地址
    addsChange(e) {
      this.currAddsId = e.target.value
    },
    // 确定选中地址
    handleAddress() {
      const result = this.addressList.filter(item => item.id === this.currAddsId)
      // this.defLogistic = result[0]
      this.visible = false
      this.$emit('newAddress', result[0])
    },
    // 取消关闭选择地址
    closeAddress() {
      const result = this.addressList.filter(item => item.id === this.currAddsId)
      // this.$emit('newAddress', result[0])
      this.visible = false
    },
    // 编辑地址
    editAddress(item) {
      this.titleSize = '编辑地址'
      this.$refs.editModal.show(item)
    },
    refreshList(value) {
      if (value) {
        this.fetchAddressList()
      }
    },
    // 新建地址
    addAddress() {
      this.titleSize = '新建地址'
      this.$refs.editModal.show({})
    }
  }
}
</script>

